<template>
  <div
    class="weui-cell"
    :class="{
      'vux-tap-active': isLink || !!link,
      'weui-cell_access': isLink || !!link,
      'vux-cell-no-border-intent': !borderIntent,
      'vux-cell-disabled': disabled
    }"
    @click="onClick">
    <div class="weui-cell__hd">
      <slot name="icon"></slot>
    </div>
    <div class="vux-cell-bd" :class="{'vux-cell-primary': primary === 'title' && valueAlign !== 'left'}">
      <p>
        <label class="vux-label" :style="getLabelStyles()" :class="labelClass" v-if="title || hasTitleSlot">
        <div>
           <div class="tTitle title" :class="{newLine:(!tagTop||showFlag(tagTop).length==0 )}">{{ title }}</div>
           <div class="hl-flag">
             <div v-if="tagTop" v-for="(item, index) in (tagTop &&  showFlag(tagTop) )" :class="{new:tagTop.key || item == FlagNew}" :key="index">{{item}}</div>
           </div>
        </div>
          
        </label>
        <slot name="after-title"></slot>
      </p>
      <inline-desc>
        <slot name="inline-desc">{{ inlineDesc }}</slot>
      </inline-desc>

      <div class="hl-flag">
       <div v-show="checkTagShow(key)" v-for="(value, key, index) in tags" :key="index">{{getShowStr(key,value)}}</div>
      </div>
    </div>
    <div class="weui-cell__ft" :class="valueClass">
      <slot name="value"></slot>
      <slot>{{ value }}</slot>
      <i class="weui-loading" v-if="isLoading"></i>
    </div>
    <slot name="child"></slot>
  </div>
</template>

<script>
import {InlineDesc} from 'vux'
import props from './props'

import {
    mapState,
    mapActions
} from 'vuex'

export default {
  name: 't-cell',
  components: {
    InlineDesc
  },
  props: props(),
  beforeMount () {
    this.hasTitleSlot = !!this.$slots.title
  },
  computed: {
    valueClass () {
      return {
        'vux-cell-primary': this.primary === 'content' || this.valueAlign === 'left',
        'vux-cell-align-left': this.valueAlign === 'left',
        'vux-cell-arrow-transition': !!this.arrowDirection,
        'vux-cell-arrow-up': this.arrowDirection === 'up',
        'vux-cell-arrow-down': this.arrowDirection === 'down'
      }
    },
    labelClass () {
      return {
        'vux-cell-justify': this.$parent.labelAlign === 'justify' || this.$parent.$parent.labelAlign === 'justify'
      }
    },
    ...mapState({
        tagitemDic: state => state.z39.tagitemDic
    })
  },
  methods: {
    showFlag(item) { 
      var tempFlags = [];
      // console.log(typeof item) ;
      // if(typeof item=='string' &&item.constructor==String ){
      //   return item.split(",") ;
      // }
      if( item.exts ){
        tempFlags = tempFlags.concat( item.exts) ;
      }
      if(item.new){
        tempFlags.push(this.FlagNew);
      }
      if (item.speed > 0) {
        tempFlags.push(item.speed + "km/h")
      }
      if (item.stepCount >= 10) {
        if (item.stepCount < 1000) {
          tempFlags.push(item.stepCount + "步");
        } else {
          tempFlags.push(Math.floor(item.stepCount / 100) / 10 + "k步");
        }
      }
      if (item.dis > 0) {
        if (item.dis < 1000) {
          tempFlags.push(item.dis + "m");
        } else {
          tempFlags.push(Math.floor(item.dis / 100) / 10 + "km");
        }
      } 
      return tempFlags; //.join(",") ;
    },
    getLabelStyles () {
      return {
        width: this.$parent.labelWidth || this.$parent.$parent.labelWidth,
        textAlign: this.$parent.labelAlign || this.$parent.$parent.labelAlign,
        marginRight: this.$parent.labelMarginRight || this.$parent.$parent.labelMarginRight
      }
    },
    checkTagShow(tag){
      var hideArr = ["started","done","created","toggle","cancelled"] ;
      return hideArr.indexOf(tag) == -1 ;
    },
    getShowStr(key,value){
      var name = this.tagitemDic[key] ;
      if( value.length == 0){
        return name ;
      }
      value = value.replace(this.filterStr+" ",'') ;
      value = value.replace(this.filterStr,'') ;
      if(key == "need"){
        value = value.replace(/00:(\d\d)/,"$1m") ;
      }
      return name +" "+ value ;
    },
    onClick () {
      !this.disabled && this.go(this.link, this.$router)
    },
    go (url, $router) {
      if (/^javas/.test(url) || !url) return
      const useRouter = typeof url === 'object' || ($router && typeof url === 'string' && !/http/.test(url))
      if (useRouter) {
        if (typeof url === 'object' && url.replace === true) {
          $router.replace(url)
        } else {
          url === 'BACK' ? $router.go(-1) : $router.push(url)
        }
      } else {
        window.location.href = url
      }
    }
  },
  data () {
    return {
      hasTitleSlot: false ,
      FlagNew:'新建'
    }
  }
}
</script>

  <style >
    .tTitle{float: left;    padding-right: 6px;}
    .newLine{float: inherit;}
    .hl-flag{overflow: hidden;}
    .hl-flag div{ margin: 4px 0 0 0;
    color: white;
    background: #10aeff;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 13px;
    float: left;
    margin-right: 5px; }

    .hl-flag .set{background: #ff9600;}
    .hl-flag .new{background: #ff9600;}
  </style>